<template>
  <div>
    <div class="layout-content control-content">
      <!-- 查询表单 -->
      <Form ref="formInline" :model="searchfrom" inline class="from-content">
        <FormItem>
          <Input type="text" v-model="searchfrom.Name" placeholder="请输入治疗师名称" />
        </FormItem>
       <FormItem label="类型" :label-width="60"  >
          <Select v-model="searchfrom.Zlslb">
              <Option value="全部" key="全部">全部</Option>
              <Option v-for="item in ZLSLB_LIST" :value="item.Name" :key="item.Name">{{item.Name}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="search()">查询</Button>
        </FormItem>
      </Form>

    </div>
    <div class="layout-content main-content">
      <Button type="primary" @click="add('添加项目')">添加</Button>
      <Table ref="table" border :columns="fields" :data="tabledata" :height="tableHeight">
        <!-- table 操作 -->
        <template slot-scope="{ row,index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="add('编辑项目',row.Id,index)">编辑</Button>
            <Button type="warning" size="small" style="margin-right: 5px" @click="work(row.Id,index)">排班</Button>
            <Button type="success" size="small" style="margin-right: 5px" @click="log(row.Id,index)">排班记录</Button>
            <Button type="error" size="small" style="margin-right: 5px" @click="remove(row.Id,index)">删除</Button>
            <Button type="error" size="small" v-if="row.Openid" @click="wechat(row.Id,index)">解除微信</Button>
        </template>
      </Table>
      <!-- 分页区域 -->
      <div class="page-cut">
        <Page :total="count" size="small" show-elevator :current="page" @on-change="pageData" />
      </div>
    </div>
      <!-- 弹层 -->
      <Modal
          v-model="modal_visable"
          :title="modal_title"
          :loading="modalLoading"
          :mask-closable="false">
          <!-- 弹层内容 -->
          <Form ref="modal_form" :model="modal_form" :rules="modal_form_rules">
            <input type="hidden" v-model="modal_form.Id">

            <FormItem prop="Account">
                <Input type="text" v-model="modal_form.Account" placeholder="治疗师编号" />
            </FormItem>
            <FormItem prop="Nickname">
                <Input type="text" v-model="modal_form.Nickname" placeholder="请填写治疗师姓名" />
            </FormItem>
            治疗师分类：
            <CheckboxGroup v-model="modal_form.Job">
              <Checkbox :label="item.Name" v-for="(item,index) in ZLSLB_LIST" :value="item.Id" :key="index"></Checkbox>
            </CheckboxGroup>
            <br>
            治疗师职位：
            <RadioGroup v-model="modal_form.Memberlevel">
                <Radio v-for="(item,index) in ZLSZW_LIST" :label="item.Id" :key="index">{{item.Name}}</Radio>
           </RadioGroup>
           <br><br>
            <FormItem prop="Parent_id" v-if="modal_form.Memberlevel == 8">
              <Select v-model="modal_form.Parent_id" placeholder="请选择治疗师组长">
                <Option v-for="item in MEMBER_LIST" :value="item.Id" :key="item.Id">{{item.Nickname}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="Mobile">
                <Input type="text" v-model="modal_form.Mobile" placeholder="请填写联系电话" />
            </FormItem>
          </Form>
          <div slot="footer">
              <Button @click="modal_cancel">取消</Button>
              <Button type="primary" @click="modal_ok">确定</Button>
          </div>
          <!-- 弹层内容 end -->
      </Modal>

      <Modal v-model="modal_work" title="治疗师排班" :loading="modalLoading" :mask-closable="false" width="1200" class="modals">
            <!-- 弹层内容 -->
            <div class="titles">
              <span class="name">治疗师姓名：{{zlsname}}</span>
              <Button type="primary" size="small" style="float:right" @click="print()">打印</Button>
            </div>
            <template>
                <Table :columns="columns" :data="data"></Table>
            </template>
            <div slot="footer">
              <Button @click="modal_work_cancel">关闭</Button>
           </div>
      </Modal>
      <div class="tables" id="tables">
        <div class="titles">
          <span class="name">治疗师姓名：{{zlsname}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th v-for="(item,index) in columns" :key="index">{{item.title}}</th>
            </tr>
          </thead>
          <tbody>
           
            <tr v-for="(item,index) in data" :key="index">
              <td>{{item.Nickname}}</td>
              <td>{{item.Ch}}</td>
              <td>{{item.Type}}</td>
              <td>{{item.Time}}</td>
              <td>{{item.Job}}</td>
              <td>{{item.Address}}</td>
              <td>{{item.Remark}}</td>
              <td>{{item.Ctzl}}</td>
              <td>{{item.Dd}}</td>
            </tr>
          </tbody>
        </table>

      </div>


        <Modal v-model="modal_log" title="排班记录" :loading="modalLoading" :mask-closable="false" width="1200" class="modals">
            <!-- 弹层内容 -->
            <div class="titles">
              <span class="name">治疗师姓名：{{zlsname}}</span>
              <Button type="primary" size="large" style="float:right;padding: 4px 15px 4px 15px;" @click="more_log(zlsid)">检索</Button>
              <DatePicker type="daterange" placement="bottom-end" placeholder="2019-07-18 - 2019-07-18" style="width: 200px;float:right;margin-right:10px;"></DatePicker>
              <button></button>
            </div>

            <template>
                <Table :columns="columns" :data="data"></Table>
            </template>
            <div slot="footer">
              <Button @click="modal_work_cancel">关闭</Button>
           </div>
      </Modal>


  </div>
</template>
     
<script>
import mixin from '../Mixin/mix'
import { constants } from 'crypto';
import { setTimeout } from 'timers';
import { log } from 'util';
export default {
  data() {
    return {
      // 弹层显示状态
      modal_visable:false,
      modal_work:false,
      modal_log:false,
      modal_title:'弹层标题',
      modalLoading:false,
      tables_show:false,
      count:0,
      zlsname:'',
      zlsid:0,
      page:1,
      // 查询表单
      searchfrom: {
        Zlslb: "全部",
        Name: ""
      },
      // 表格字段
      fields: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: "治疗师编号",
          key: "Account"
        },
        {
          title: "治疗师姓名",
          key: "Nickname"
        },
        {
          title: "联系电话",
          key: "Mobile"
        },
        {
          title: '操作',
          slot: 'action',
          width: 330,
          align: 'center'
        }
      ],
      // 表格数据
      tabledata: [],
      //检索列表
      ZLSLB_LIST: [],
      ZLSZW_LIST:[],
      //治疗师列表
      MEMBER_LIST: [],
      columns: [],
      data: [],
      // 弹层表单
      modal_form:{
        Id:'',
        Nickname:'',
        Account:'',
        Job:[],
        Memberlevel:'',
        Mobile:'',
        MemberGroup:2,
        Parent_id:0,
      },
      // 弹层表单校验规则
      modal_form_rules:{
        
      }
    };
  },
  mixins:[mixin],
  beforeMount() {
    this.loadData();
  },
  methods: {
    //分页数据
    pageData(page){
      this.page = page
      this.loadData();
    },
    // 获取数据
    loadData() {
      var param = {
        page:this.page,
        Name:this.searchfrom.Name,
        Zlslb:this.searchfrom.Zlslb
      };
      
      this.ajax("api/Treat/ZlsList/",'post',param,true).then(res=>{
        if(res.data.data.list.length >0 ){
           res.data.data.list.forEach(function(el, index){
              res.data.data.list[index].Job = el.Job.split(',');
           });
        }
        console.log(res);
        this.tabledata = res.data.data.list;
        this.ZLSLB_LIST = res.data.data.ZLSLB_LIST;
        this.MEMBER_LIST = res.data.data.MEMBER_LIST;
        this.count = res.data.data.count;
        this.ZLSZW_LIST = res.data.data.ZLSZW_LIST;
      })
    },
    // 搜索
    search() {
      console.log(this.searchfrom);
      this.loadData();
    },
    // action 点击添加
    add(title,id='0',index='-1'){
      this.modal_visable = true;
      this.modal_title = title;
      if(index >= 0){
        this.modal_form = {
          Id:this.tabledata[index].Id,
          Nickname:this.tabledata[index].Nickname,
          Account:this.tabledata[index].Account,
          Job:this.tabledata[index].Job,
          Memberlevel:this.tabledata[index].Memberlevel,
          Mobile:this.tabledata[index].Mobile,
          MemberGroup:2,
          Parent_id:this.tabledata[index].Parent_id,
        };
        console.log(this.modal_form);
      }else{
        this.modal_form = {
          Id:'0',
          Nickname:'',
          Account:'',
          Job:[],
          Memberlevel:'',
          Mobile:'',
          MemberGroup:2,
          Parent_id:0,
        };
      }
    },
    work(id,index){
      this.modal_work = true;
      this.zlsname = this.tabledata[index].Nickname;

      this.columns= [
           {
              title: '患者姓名',
              key: 'Nickname'
          },
          {
              title: '床号',
              key: 'Bed'
          },
          {
              title: '类型',
              key: 'Type1'
          },
          {
              title: '治疗时间',
              key: 'Time'
          },
          {
              title: '项目',
              key: 'Name'
          },
          {
              title: '部位',
              key: 'Address'
          },
          {
              title: '备注',
              key: 'Remark'
          },
          {
              title: '床头治疗',
              key: 'Bedh'
          },
          {
              title: '点滴',
              key: 'Drip'
          }
      ]
      console.log(id);
      
      this.ajax("api/Treat/ZlsWork","post",{Id:id},true).then(res=>{
        console.log(res);
        this.data = res.data.data.list
      })
      // this.data= [
      //     {
      //         HZMC: '包福林',
      //         CH: 'ZJ10',
      //         LX: '住院',
      //         SJ: '08:00-08:30',
      //         XM: '干扰电治疗',
      //         BW: '4',
      //         BZ: '左侧',
      //         CTZL: '是',
      //         DD: '是',
      //     }
      // ]
    },
    log(id,index){
      this.modal_log = true;
      this.zlsid = id;
      this.zlsname = this.tabledata[index].Nickname;
      console.log(this.tabledata[index]);
      this.more_log(id)
    },
    more_log(id){
      this.columns= [
          {
              title: '患者姓名',
              key: 'Nickname'
          },
          {
              title: '床号',
              key: 'Bed'
          },
          {
              title: '类型',
              key: 'Type1'
          },
          {
              title: '治疗时间',
              key: 'Time'
          },
          {
              title: '项目',
              key: 'Name'
          },
          {
              title: '部位',
              key: 'Address'
          },
          {
              title: '备注',
              key: 'Remark'
          },
          {
              title: '床头治疗',
              key: 'Bedh'
          },
          {
              title: '点滴',
              key: 'Drip'
          }
      ]
      console.log(id);
      
      this.ajax("api/Treat/ZlsWork","post",{Id:id},true).then(res=>{
        console.log(res);
        this.data = res.data.data.list
      })
    },
    wechat(id,index){
      this.$Modal.confirm({
          title: '操作提示',
          content: '<p>是否要解除微信绑定？</p>',
          loading: true,
          onOk: () => {
               this.ajax('api/Treat/ZlsWechat/',"post",{Id:id},true).then(res => {
                  setTimeout(() => {
                    this.$Modal.remove();
                    if(res.data.code == 200){
                      this.tabledata[index].Openid = "";
                    }
                    this.$Notice.success({
                        title: '操作提示',
                        desc:res.data.msg
                    });
                  }, 500);
              });
          },
          onCancel: () => {
              this.$Message.info('取消操作');
          }
      });
    },
    print(){
      document.getElementById('tables').classList.add('show');
      document.getElementsByClassName('layout')[0].classList.add('border_hidden');
      var tata=document.execCommand("print");
      if(tata){
        document.getElementById('tables').classList.remove('show');
        document.getElementsByClassName('layout')[0].classList.remove('border_hidden');
      } 
    },
    // 弹层点击确定回调
    modal_ok () {
      this.$refs["modal_form"].validate((valid) => {
          if (valid) {
              var param = this.modal_form
              if(!param['Account']){
                this.$Message.error('请填写治疗师编号!');
                return false;
              }
              if(!param['Nickname']){
                this.$Message.error('请填写治疗师姓名!');
                return false;
              }
              if(param['Job'].length <= 0){
                this.$Message.error('请选择治疗师分类!');
                return false;
              }
              if(!param['Memberlevel']){
                this.$Message.error('请选择治疗师职位!');
                return false;
              }
              if(!param['Mobile']){
                this.$Message.error('请填写联系电话!');
                return false;
              }
              if(!(/^1[3456789]\d{9}$/.test(param['Mobile']))){ 
                this.$Message.error('手机号码有误，请重填!');
                return false;
              } 
              console.log(param);
              if(param.Memberlevel != 8){
                param.Parent_id = 0;
              }else{
                if(!param['Parent_id']){
                  this.$Message.error('请选择上级组长!');
                  return false;
                }
              }
              if(param.Job.length >0 ){
                param.Jobs = param.Job.join(',');
              }else{
                param.Jobs = "";
              }
              this.ajax('api/Treat/ZlsInfo/',"post", param,true).then(res => {
                console.log(res);
                
                this.$Notice.success({
                    title: '操作提示',
                    desc:res.data.msg
                });
                if(res.data.code == 200){
                  this.loadData();
                }
                this.modal_visable=false;
              });
          } else {
              this.$Message.error('请填写必填项');
          }
      })
    },
    // action 点击删除
    remove(id,index){
      this.$Modal.confirm({
          title: '操作提示',
          content: '<p>您确认要删除吗？</p>',
          loading: true,
          onOk: () => {
               this.ajax('api/Treat/ZlsDel/',"post",{Id:id},true).then(res => {
                  setTimeout(() => {
                    this.$Modal.remove();
                    if(res.data.code == 200){
                      this.tabledata.splice(index, 1);
                    }
                    this.$Notice.success({
                        title: '操作提示',
                        desc:res.data.msg
                    });
                  }, 500);
              });
          },
          onCancel: () => {
              this.$Message.info('取消操作');
          }
      });
    },
    // 弹层点击确定回调
    modal_cancel () {
        // 弹层取消点击回调
        this.$Message.info('取消操作');
        this.modal_visable=false;
    },
    // 弹层点击确定回调
    modal_work_cancel () {
        // 弹层取消点击回调
        this.modal_work=false;
    },
  }
};
</script>

<style scoped>
@import "../../style/base.css";
.titles .name{
  display: inline-block;
  height: 38px;
  line-height: 26px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
}
.tables{
  padding:20px 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;
  width: 100%;
  height: 100%;
  background: #fff;
}
.tables table{
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse
}
.tables table tr{
  border-bottom: 1px solid #ccc;
}
.tables table td,.tables table th{
  border: 1px solid #ccc;
  border-top: 0;
  border-bottom: 0;
  text-align: left;
  border-bottom-width: 2px;
  vertical-align: bottom;
  padding:12px 8px;
  line-height: 1.42857143;
  color: #000 !important;
  font-size: 18px;
  font-weight: 400;
}
.tables table th{
  border-top: 1px solid #ccc;
  font-weight: 700;
}
.show{
  display: block;
}

</style>
